/* eslint-disable camelcase */
import React, { Component } from "react";

import "./welcomeApplyNew.scss";
import yhTools from "@tools/yh";
import { InterfaceG, agreements_url } from "@config/Config";
import { refresh } from "@/component/scroll/index2";
import { List, Toast, Modal } from "antd-mobile";
import ListItem from "antd-mobile/lib/list/ListItem";

import Button from "@component/button/index";

const alert = Modal.alert;

const contract = [
	"《永辉金融隐私政策》",
	"《永辉金融用户协议》",
	"《非在校学生身份承诺函》"
];
const agreementPageMap = {
	1: "/privacyAgreement.html", //此路由不用，换为cdn的隐私协议
	2: "/ServiceAgreementAuthorization",
	3: "/nonStudentCommitmentLetter"
};
class WelcomeApplyNew extends Component {
	constructor(props) {
		super(props);
		this.state = {
			isShowBottomButton: false, // 显示底部按钮
			loaded: 0,
			couponTag: {
				//优惠角标
				couponAllValue: "",
				isAngleTip: 0, //是否展示角标(0不展示,1展示
				modal: false
			}
		};
		this.hasResp = false;
		this.xhfBtnHeight = 0;
	}
	componentDidMount() {
		//   setTimeout(()=>{
		//     this.initScroll();
		//   }, 400);
		this.queryMarketCouponInfo();
	}
	//优惠券金额角标
	queryMarketCouponInfo() {
		let { lnid } = this.props;
		let objs = {
			url: InterfaceG.queryMarketCouponInfo602,
			params: {
				functionNo: "XHF_SUBMIT_CREDIT_PASS_602_611",
				lnid
			},
			_alertShow: false
		};
		yhTools.request(objs).then(res => {
			this.setState({
				couponTag: res.data
			});
		});
	}

	initScroll() {
		this.xhfBtnHeight =
			document.getElementsByClassName("xhf-btn-box")[0].offsetTop;
		window.onscroll = () => {
			//获取距离页面顶部的距离
			let toTop = document.documentElement.scrollTop || document.body.scrollTop;
			//div距离顶部的距离
			if (toTop > this.xhfBtnHeight) {
				if (!this.state.isShowBottomButton)
					this.setState({
						isShowBottomButton: true
					});
			} else if (this.state.isShowBottomButton) {
				this.setState({
					isShowBottomButton: false
				});
			}
		};
	}

	/**立即激活点击 */
	handleApply() {
		this.btnFn();
	}
	/**小辉付申请按钮点击*/
	btnFn = () => {
		yhTools.throttle(this.isHasLocation(), 400);
	};
	/**获取位置信息*/
	isHasLocation() {
		let { longitude = "", latitude = "" } = this.props.getAppPlatformsDatas;
		if (!longitude || !latitude) {
			//获取经纬度
			window.YHAuthorize.callHandler("Privacy_Loaction", "", res => {
				// if (res.status == "1000") {
				const { data = {} } = res;
				longitude = data.longitude || "";
				latitude = data.latitude || "";
				this.props._getAppPlatformsDatas({
					longitude,
					latitude,
					devicesInfo: {
						...this.props.getAppPlatformsDatas.devicesInfo,
						longitude,
						latitude
					}
				});
				yhTools.throttle(this.seeAmount(longitude, latitude), 2000, {
					trailing: false
				});
				// } else if (res.status == "3001") {
				// 	alert("", "请您打开手机定位权限，否则该功能无法正常使用", [
				// 		{ text: "取消", onPress: () => {} },
				// 		{ text: "设置", onPress: () => this.openLoction() }
				// 	]);
				// } else {
				// 	Toast.info(res.message, 2);
				// }
			});
		} else {
			yhTools.throttle(this.seeAmount(longitude, latitude), 2000, {
				trailing: false
			});
		}
	}
	/** 去设置允许打开地理位置 */
	openLoction() {
		yhTools.settingPrivacy();
	}
	/**调查看额度接口*/
	seeAmount = (longitude, latitude) => {
		if (this.hasResp) {
			return false;
		}
		let objs = {
			url: InterfaceG.appBtnOperation,
			params: {
				longitude: longitude,
				latitude: latitude,
				userDeviceInfo: JSON.stringify(
					this.props.getAppPlatformsDatas.devicesInfo
				),
				productNo: "601", // 代表小辉付
				version: "2.0"
			},
			_alertShow: false
		};
		Toast.loading("加载中...", 100);
		this.hasResp = true;
		yhTools.request(objs).then(res => {
			if (res.code === "0") {
				Toast.hide();
				// processNo：1-在白名单-内部员工 2-在白名单-非永辉内部员工 3-不在白名单
				const {
					pageNo,
					processNo,
					pageName,
					lnid,
					applyNo,
					pageMsg,
					userName,
					idNo
				} = res.data;
				this.props._getAppPlatformsDatas({ lnid, applyNo, processNo });
				this.props.getCreditStep(lnid);
				this.hasResp = false;
			} else {
				Toast.hide();
				Toast.info(res.message, 2);
				this.hasResp = false;
			}
		});
	};
	/**去提交授信 */
	submitCredit(lnid) {
		if (!lnid) {
			return;
		}
		let objs = {
			url: InterfaceG.submitCredit,
			params: {
				productNo: "601",
				lnid: lnid,
				userDeviceInfo: JSON.stringify(
					this.props.getAppPlatformsDatas.devicesInfo
				),
				version: "1.0"
			}
		};
		Toast.loading("加载中...", 100);
		yhTools.request(objs).then(res => {
			Toast.hide();
			// 0 未授信 1通过 2授信中 3重新授信 4授信拒绝
			if (res.code === "0") {
				const status = res.data.status;
				if (status == "1") {
					this.props.history.push({
						pathname: "/xhfOpenSuccess",
						state: { fromUrl: "xhfHomeCredit" }
					});
				} else if (status == "4") {
					this.props.history.push({
						pathname: "/xhfOpenFail",
						state: { message: res.data.message }
					});
				} else if (status == "2" || status == "3") {
					//授信中
					//科罗纳去10秒倒计时页面
					this.props.history.push("/xhfLivenessRet");
				}
			} else {
				Toast.info(res.message, 2);
			}
		});
	}
	/**科罗纳调授信接口  */
	xhfAppSubApply() {
		const { lnid, applyNo, devicesInfo } = this.props.getAppPlatformsDatas;
		let objs = {
			url: InterfaceG.yhbXhfApply,
			params: {
				lnid: lnid,
				applyNo: applyNo,
				userDeviceInfo: JSON.stringify(devicesInfo)
			}
		};
		yhTools.request(objs).then(res => {
			if (res.code === "0") {
				const status = res.data.status;
				if (status == "1") {
					this.porps.getXHFHome();
				} else if (status == "4") {
					this.props.history.push({
						pathname: "/xhfOpenFail",
						state: { message: res.data.message }
					});
				} else if (status == "2" || status == "3") {
					//授信中
					//科罗纳去10秒倒计时页面
					this.props.history.push("/xhfLivenessRet");
				}
			} else {
				Toast.info(res.message, 2);
			}
		});
	}
	/**小辉付跳转不同首页*/
	jumpPage(url, Urlparams) {
		this.props.history.push({
			pathname: `/${url}`,
			state: Urlparams
		});
	}
	/**路由跳转 */
	jumpRouter(router) {
		this.props.history.push(router);
	}
	/**
	 * 图片anload事件
	 */
	load = () => {
		refresh();
	};
	onClose = () => {
		this.setState({
			modal: false
		});
	};
	openContract = type => {
		this.onClose();
		if (type == 1) {
			this.props.history.push({
				pathname: "/iframeAgreements",
				state: {
					src: agreements_url + agreementPageMap[type],
					title: "永辉金融隐私政策"
				}
			});
		} else {
			this.jumpRouter(agreementPageMap[type]);
		}
	};
	render() {
		const { couponTag = {} } = this.state;
		const {
			newGuestWelfareImgs = [],
			interestFreeImgs = [],
			newGuestGiftImgs = [],
			xhfCouponsImgs = [],
			xhfUseProfileImgs = [],
			lnid
		} = this.props;
		// console.log("newGuestWelfareImgs-->", newGuestWelfareImgs);
		// console.log("interestFreeImgs-->", interestFreeImgs);
		// console.log("newGuestGiftImgs-->", newGuestGiftImgs);
		// console.log("xhfCouponsImgs-->", xhfCouponsImgs);
		// console.log("xhfUseProfileImgs-->", xhfUseProfileImgs);
		return (
			<section className="xhf_welcome-box">
				{
					//针对617的长图
					lnid == "617" && (
						<div className="imgbox">
							{newGuestWelfareImgs.length > 0 && (
								<img
									src={newGuestWelfareImgs[0].imgUrl}
									onLoad={this.load}
									alt=""
									key="617img"
								/>
							)}
						</div>
					)
				}
				{lnid != "617" && (
					<div className="imgbox">
						{
							// 新客福利图片
							newGuestWelfareImgs.length > 0 &&
								lnid != "617" &&
								newGuestWelfareImgs.map((imgItem, i) => {
									return (
										<img
											src={imgItem.imgUrl}
											onLoad={this.load}
											alt={imgItem.name}
											key={imgItem.id ? imgItem.id : `newGuestWelfareImgs${i}`}
										/>
									);
								})
						}
						{
							// 免息立减图片
							interestFreeImgs.length > 0 &&
								interestFreeImgs.map((imgItem, i) => {
									return (
										<img
											src={imgItem.imgUrl}
											onLoad={this.load}
											alt={imgItem.name}
											key={imgItem.id ? imgItem.id : `interestFreeImgs${i}`}
										/>
									);
								})
						}

						{
							// 新客礼包图片
							newGuestGiftImgs.length > 0 &&
								newGuestGiftImgs.map((imgItem, i) => {
									return (
										<img
											src={imgItem.imgUrl}
											onLoad={this.load}
											alt={imgItem.name}
											key={imgItem.id ? imgItem.id : `newGuestGiftImgs${i}`}
										/>
									);
								})
						}
						{
							// 小辉付优惠券
							xhfCouponsImgs.length > 0 &&
								xhfCouponsImgs.map((imgItem, i) => {
									return (
										<img
											src={imgItem.imgUrl}
											onLoad={this.load}
											alt={imgItem.name}
											key={imgItem.id ? imgItem.id : `xhfCouponsImgs${i}`}
										/>
									);
								})
						}
						{
							// 小辉付使用简介
							xhfUseProfileImgs.length > 0 &&
								xhfUseProfileImgs.map((imgItem, i) => {
									return (
										<img
											src={imgItem.imgUrl}
											onLoad={this.load}
											alt={imgItem.name}
											key={imgItem.id ? imgItem.id : `xhfUseProfileImgs${i}`}
										/>
									);
								})
						}
					</div>
				)}
				{yhTools.createPortal(
					<div
						key="xhf_welcome"
						className="xhf_welcome-box-footer show-footer-box fix"
					>
						<div className="agree-box">
							<div className="xy-text-box">
								<p className="huise">点击按钮，表示您已阅读并同意</p>
								<p className="xieyi-p">
									<a
										className="xieyi"
										onClick={e => {
											if (e) {
												e.stopPropagation();
											}
											this.setState({
												modal: true
											});
										}}
									>
										《永辉金融相关协议及承诺函》
									</a>
									{/* <a
										className="xieyi"
										onClick={() =>
											this.jumpRouter("/ServiceAgreementAuthorization")
										}
									>
										《永辉金融用户协议》
									</a>
									<a
										className="xieyi"
										onClick={() =>
											this.jumpRouter("/nonStudentCommitmentLetter")
										}
									>
										《非在校学生身份承诺函》 
									</a> */}
								</p>
							</div>
						</div>
						<div style={{ position: "relative" }}>
							<Button
								style={{
									marginTop: "0.2rem"
								}}
								onClick={this.handleApply.bind(this)}
								buttonStyle={{
									height: "1rem",
									lineHeight: "1rem",
									borderRadius: "1.2rem",
									color: "#9b4224",
									background:
										"linear-gradient(180deg, #ffdb66 0%, #f8d151 100%)"
								}}
							>
								同意开通
							</Button>
							{couponTag.isAngleTip == "1" && (
								<span className="tip-text">
									领取{couponTag.couponAllValue}元券包
								</span>
							)}
						</div>
					</div>
				)}
				<Modal
					popup
					visible={this.state.modal}
					onClose={this.onClose}
					animationType="slide-up"
					wrapClassName="contact-slide-up"
				>
					<List className="popup-list">
						{contract.map((item, index) => (
							<List.Item
								key={index}
								onClick={() => this.openContract(index + 1)}
							>
								{item}
							</List.Item>
						))}
						<div className="line"></div>
						<ListItem onClick={this.onClose}>取消</ListItem>
					</List>
				</Modal>
			</section>
		);
	}
}

export default WelcomeApplyNew;
